<template>
  <view class="component-loader-container">
    <!-- 顶部区域 -->
    <view class="header">
      <view class="title-row">
        <text class="title">{{ pageTitle }}</text>
      </view>
    </view>
    
    <!-- 组件内容区域 -->
    <view class="component-content">
      <!-- 校园地图组件 -->
      <view v-if="componentName === 'campus-map'" class="map-component">
        <view class="map-placeholder">
          <text class="map-text">校园地图组件</text>
          <text class="map-desc">这里将显示校园地图</text>
        </view>
      </view>
      
      <!-- 其他组件 -->
      <view v-else class="default-component">
        <text class="default-text">组件【{{ componentName }}】开发中</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      componentName: '',
      pageTitle: '组件加载'
    }
  },
  
  onLoad(options) {
    if (options.component) {
      try {
        this.componentName = decodeURIComponent(options.component);
      } catch (error) {
        console.error('组件名解码失败:', error);
        this.componentName = options.component; // 使用原始组件名作为备选
      }
    }
    if (options.title) {
      try {
        this.pageTitle = decodeURIComponent(options.title);
      } catch (error) {
        console.error('标题解码失败:', error);
        this.pageTitle = options.title || '组件加载'; // 使用原始标题或默认标题作为备选
      }
    }
    
    // 设置页面标题
    uni.setNavigationBarTitle({
      title: this.pageTitle
    });
  },
  
  methods: {
    // 这里可以添加组件特定的方法
  }
}
</script>

<style>
.component-loader-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部区域样式 */
.header {
  display: flex;
  flex-direction: column;
  background-color: #1e3c72;
  color: #fff;
  position: relative;
  padding-top: calc(20rpx + 44px);
}

.title-row {
  display: flex;
  justify-content: center;
  padding: 20rpx 0;
}

.title {
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
}

/* 组件内容区域 */
.component-content {
  flex: 1;
  padding: 20rpx;
}

/* 地图组件样式 */
.map-component {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 40rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0;
}

.map-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.map-desc {
  font-size: 28rpx;
  color: #666;
  text-align: center;
}

/* 默认组件样式 */
.default-component {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 40rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400rpx;
}

.default-text {
  font-size: 32rpx;
  color: #999;
  text-align: center;
}
</style>